<template>
	<div style="height: 100%;">
		<el-button style="height: 32px;line-height: 30px; padding-top: 0; padding-bottom: 0;margin-bottom: 10px;"
			size="small" @click="addData()" type="primary">
			+ 添加生产设备
		</el-button>

		<el-table :data="dataList" border size="mini" stripe
			style="width: 100%;height: 100%;overflow-y: auto;border-radius: 8px;">
			<el-table-column type="index" width="50">
			</el-table-column>
			<el-table-column prop="subEquipName" label="设备名称">

			</el-table-column>
			<el-table-column prop="subEquipNo" label="设备编号">

			</el-table-column>
			<el-table-column prop="subEquipModel" label="设备类型">

			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<template>
						<el-button v-if="scope.row.busiStatus== 'IN_USE'" type="text" @click="updateBusiStatus(scope.row)"
							style="color: #F56C6C;" size="small">
							停用
						</el-button>
						<el-button v-else type="text" size="small" @click="updateBusiStatus(scope.row)"
							style="color: #F56C6C;">
							启用
						</el-button>
					</template>
					<el-button type="text" size="small" @click="editThis(scope.row)">编辑</el-button>

					<!-- <el-button type="text" size="small" @click="savaParameter(scope.row)">维护参数</el-button> -->
				</template>
			</el-table-column>
		</el-table>

		<el-dialog :visible.sync="visible1" title="生产设备" width="80%" :zIndex="9999" append-to-body>
			<el-form ref="form3" :model="form" :rules="formRules" label-width="85px" label-position="left">

				<el-form-item label="图片">
					<div>
						<el-upload ref="upload" :limit="1" :multiple="false" action="#" :auto-upload="false" :on-change="changeFile"
							:on-remove="()=>{form.imgId = ''}" list-type="picture-card" :file-list="fileList">
							<i class="el-icon-plus"></i>
						</el-upload>
					</div>
				</el-form-item>

				<el-form-item label="设备名称" prop="subEquipName">
					<el-input v-model="form.subEquipName"></el-input>
				</el-form-item>

				<el-form-item label="设备编号" prop="subEquipNo">
					<el-input v-model="form.subEquipNo"></el-input>
				</el-form-item>
				<el-form-item label="设备型号" prop="subEquipModel">
					<el-input v-model="form.subEquipModel"></el-input>
				</el-form-item>
				<div class="displayFlex">
					<el-form-item label="设备DCS" prop="dcsMn" class="mr10">
						<el-input v-model="form.dcsMn" @change="getDscRunList" @blur="getDscRunList"></el-input>
					</el-form-item>
					<el-form-item label="开关DCS" prop="dcsRun" class="mr10">
						<el-select v-model="form.dcsRun" filterable>
							<el-option :label="item1.name" :value="item1.code" v-for="(item1,index1) in dcsRunList">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="开关标准值" prop="dcsRunStd" class="mr10">
						<el-input v-model="form.dcsRunStd" type="number"></el-input>
					</el-form-item>
				</div>

				<div v-for="(item,index) in form.parameterList" :key="index"
					style="border-bottom: 1px solid#f5f5f5;margin-bottom: 15px; width: 100%;">
					<div class="displayFlex width100p">
						<el-form-item label="规格参数" prop="parameterName" style="width: 25%;">
							<el-input v-model="item.parameterName"></el-input>
						</el-form-item>

						<div @click="deleteParameter(index)" style="margin-bottom: 20px;margin-left: 45px;">
							<el-button type="text" style="color: #f56c6c;">
								<span>删除</span>
								<!-- <i class="el-icon-circle-close el-icon--right" /> -->
							</el-button>
						</div>
					</div>

					<div class="displayFlex width100p">
						<!-- <el-form-item v-if="item.designValueType == 'EXACT_VALUE'" label="设计值" prop="designValue"
							style="flex: 1;" class="mr10">
							<el-input v-model="item.designValue"></el-input>
						</el-form-item> -->

						<el-form-item label="设计值" prop="minDesignValue" style="flex: 1;" class="mr10">
							<el-input v-model="item.minDesignValue" placeholder="最小值"></el-input>
						</el-form-item>
						<el-form-item label="设计值" prop="maxDesignValue" style="flex: 1;" class="mr10">
							<el-input v-model="item.maxDesignValue" placeholder="最大值"></el-input>
						</el-form-item>
						<!-- <el-form-item label="类型" prop="designValueType" style="flex: 1;" class="mr10">
							<el-select v-model="item.designValueType">
								<el-option :label="item1.label" :value="item1.value"
									v-for="(item1,index1) in [{label: '固定值', value: 'EXACT_VALUE' }, { label: '范围值' , value: 'SCOPE_VALUE' }]">
								</el-option>
							</el-select>
						</el-form-item> -->
						<el-form-item label="单位" prop="unitCode" style="flex: 1;" class="mr10">
							<el-input v-model="item.unitCode"></el-input>
						</el-form-item>

						<el-form-item label="DCS设备" prop="dcsMn" style="flex: 1;" class="mr10">
							<el-input v-model="item.dcsMn" placeholder="DCS设备"></el-input>
						</el-form-item>

						<el-form-item label="DCS参数" prop="dcsCode" style="flex: 1;">
							<el-select v-model="item.dcsCode" filterable @focus="getEachDscRunList($event,item,index)">
								<el-option :label="item1.name" :value="item1.code"
									v-for="(item1,index1) in dcsAllRunList[index]">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div @click="addParameter()">
					<el-button type="primary" icon="el-icon-plus" size="small"
						style="height: 32px;line-height: 30px; padding-top: 0; padding-bottom: 0;">添加规格参数</el-button>
				</div>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveOrUpdate()">保存</el-button>
				</div>
			</el-form>
		</el-dialog>


		<el-dialog :visible.sync="visible2" title="生产设备参数" width="40%" :zIndex="99">
			<el-form ref="form2" label-width="100px">
				<div class="displayFlex" v-for="(item,index) in parameter.parameterList" :key="index">
					<el-form-item label="规格参数" prop="parameterName" style="width: 200px;">
						<el-input v-model="item.parameterName" placeholder="规格参数"></el-input>
					</el-form-item>

					<el-form-item label="单位" prop="unitCode" style="flex: 1;">
						<el-input v-model="item.unitCode"></el-input>
					</el-form-item>

					<div style="width: 80px;text-align: right;color: #F56C6C;margin-bottom: 22px;"
						@click="deleteParameter(index)">
						删除
					</div>
				</div>
				<div @click="addParameter" style="color: #3a3ef4;" class="point">添加规格参数</div>

				<div style="text-align: center;">
					<el-button type="primary" @click="saveParameter(1)">保存</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery'

	let that
	let APPKEY = '5da5441f62e48aedc7a3853ffc75c2db';
	let PRODID = 'gf';
	let UPLOAD_ACTION = '/upload';
	let VIEW_ACTION = '/view';
	let REMOVE_ACTION = '/remove';
	let IMGURL = 'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload';
	let fileViewUrl =
		'https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID='

	export default {
		props: {
			equipmentId: {
				type: String,
				defaultValue: ''
			},

		},
		data() {
			return {
				dataList: [],
				visible1: false,
				visible2: false,
				form: {
					id: '', // 原辅料id
					subEquipNo: '', // 原辅料名称，必填
					subEquipName: '',
					subEquipModel: '', // 原辅料单位，必填
					parameterList: [],
					dcsMn: '',
					dcsRun: '',
					dcsRunStd: '',
					imgId: '',
				},
				formRules: {
					subEquipName: [{
						required: true,
						message: '请输入设备名称',
						trigger: 'blur',
					}]
				},
				parameter: {
					parameterList: []
				},
				dcsRunList: [],
				dcsAllRunList: [],
				fileList: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.getSubEquipmentList()
		},

		methods: {

			changeFile: function(file, fileList) {
				var _this = this;
				file.url = URL.createObjectURL(file.raw);

				var formdata = new FormData()
				formdata.append("file", file.raw);
				formdata.append("appKey", APPKEY);
				formdata.append("businessCode", that.randomChar(19));
				formdata.append("prodID", PRODID);
				$.ajax({
					url: IMGURL + '/upload',
					data: formdata,
					type: 'POST',
					dataType: 'json',
					contentType: false,
					processData: false,
					success: function(result) {
						var fileId = result.message.fileID;
						that.form.imgId = fileId
					},
					error: function() {}
				})
			},

			randomChar: function(l) {
				var x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
				var tmp = "";
				var timestamp = new Date().getTime();
				for (var i = 0; i < l; i++) {
					tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
				}
				return timestamp + tmp;
			},


			getEachDscRunList(e, item, index) {
				that.ajax({
					url: '/dcs/parameter/list',
					data: {
						mn: item.dcsMn,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dcsAllRunList[index] = result.data
						that.$forceUpdate()
					},
				})
			},

			getDscRunList() {
				// if (!that.form.dcsMn) return that.$message.error("请输入设备dcs")
				that.ajax({
					url: '/dcs/parameter/list',
					data: {
						mn: that.form.dcsMn,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dcsRunList = result.data
					},
				})
			},

			//删除一个规格
			deleteParameter(index) {
				that.form.parameterList.splice(index, 1)
			},

			//维护参数参数
			savaParameter(item) {
				that.ajax({
					url: '/productionEquipment/subset/parameter/getParameterList',
					data: {
						subEquipId: item.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.visible2 = true
						that.parameter.subEquipId = item.id
						that.parameter.parameterList = result.data || []
					},
				})
			},

			//新增规格参数
			addParameter() {
				that.form.parameterList.push({
					parameterName: '', // 规格参数
					designValueType: 'EXACT_VALUE',
					minDesignValue: '',
					maxDesignValue: '',
					designValue: '',
					unitCode: '',
					dcsMn: '',
					dcsCode: ''
				})
			},

			//保存规格
			saveParameter(step) {
				if (that.parameter.parameterList.length == 0) {
					return that.$message({
						message: '请填写设施规格参数',
						type: 'warning'
					});
				}

				that.ajax({
					url: '/productionEquipment/subset/parameter/batchSave?ticketId=' +
						that.$store.state.token,
					data: JSON.stringify(that.parameter),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					},
				})
			},


			editThis(item) {
				//console.log(item)
				that.ajax({
					url: '/productionEquipment/subset/getSubEquipmentById',
					data: {
						subEquipId: item.id
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.visible1 = true
							
							that.form = result.data
							that.form.parameterList = result.data.parameterList || []
							
							
							if (that.form.imgId) {
								that.fileList = [{
									name: '图片',
									url: fileViewUrl + that.form.imgId
								}]
							}else{
								that.fileList = []
								that.$nextTick(() => {
									that.$refs.upload.clearFiles()
								})
							}
							that.getDscRunList()
							if (that.form.parameterList.length) {
								for (let index in that.form.parameterList) {
									let item = that.form.parameterList[index]
									that.ajax({
										url: '/dcs/parameter/list',
										data: {
											mn: item.dcsMn,
										},
										contentType: 'application/x-www-form-urlencoded',
										success: function(result) {
											that.dcsAllRunList[index] = result.data
										},
									})
								}
							}
						}
					},
				})
			},

			addData() {
				that.visible1 = true
				that.form = that.$options.data().form
			},


			updateBusiStatus(item) {
				this.$confirm('是否确定此操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/productionEquipment/subset/updateBusiStatus',
						data: {
							subEquipId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.getSubEquipmentList()
							}
						},
					})
				})
			},

			getSubEquipmentList() {
				that.ajax({
					url: '/productionEquipment/subset/getSubEquipmentList',
					data: {
						equipmentId: that.equipmentId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
					},
				})
			},

			saveOrUpdate() {
				that.$refs['form3'].validate(function(valid) {
					if (valid) {
						that.form.equipmentId = that.equipmentId
						that.ajax({
							url: '/productionEquipment/subset/save',
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.data) {
									that.$message.success("保存成功！")
									that.getSubEquipmentList()
								}

							},
						})
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	>>>.el-message-box__wrapper {
		z-index: 999 !important;
	}

	>>>.el-upload--picture-card {
		width: 80px;
		height: 80px;
		line-height: 92px;
	}

	>>>.el-upload-list--picture-card .el-upload-list__item {
		width: 80px;
		height: 80px;
	}
</style>